<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href=https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form action="" method="POST" role="form">
    <div class="form-group">
        <label for="touxiang" >头像上传:</label>
        <input type="file" id="headPhoto" name="headPhoto" />
        <div ><img id="imag" src="img/up.png" alt="" style="height:100rem;width: 100rem;"></div>
    </div>
</form>

</body>
<script>
    /*显示上传的图片*/
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) {
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) {
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    $('#headPhoto').change(function() {
        var eImg=$('#imag');
        eImg.attr('src', getObjectURL($(this)[0].files[0]));
        $(this).after(eImg);
    });
</script>
</html>